<template>
    <div class="right-Page item-Page">
        <template v-for="(cur, key) in vueList" :key="key">
            <MenuTitle :config="cur"></MenuTitle>
            <div :style="{ height: cur.height }" class="left-menu" style="padding: 0rem 2rem 0px 0rem;" v-if="cur.componentKey === activeKey">
                <component :is="cur.key" :key="cur.key" :config="cur"></component>
            </div>
        </template>
    </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from "vue";
import MenuTitle from "@/components/MenuTitle.vue";
const props = defineProps({
    configkey: Object,
});
const activeKey = ref(props.configkey || "ComprehensiveSituation");
onMounted(() => {
    THREEX.observer.on(
        "TOP_MENU_CHANGE",
        function (ev) {
            activeKey.value =
                ev.key || props.configkey || "ComprehensiveSituation";
        },
        `TOP_MENU_CHANGE_RIGHT`
    );
});

let vueList = ref([
    {
        name: "现场人员状态",
        key: "PersonnelTrack",
        icon: "menu4",
        componentKey: "ComprehensiveSituation",
    },
    {
        name: "进出场记录",
        key: "AccessRecords",
        icon: "menu6",
        componentKey: "ComprehensiveSituation",
    },
    // {
    //     name: "报警威胁",
    //     key: "WorkDistribution",
    //     icon: "menu5",
    //     componentKey: "ComprehensiveSituation",
    // }
]);
</script>

<style scoped lang="less">
.right-Page {

    right: 1vh;


    background-size: 100% 100%;
}
</style>
